<template>
  <div class="left-menu" :class="{ open: props.drawer }">
    <div class="menu-overlay" @click="closeMenu"></div>
    <div class="menu-content">
      <el-menu
        default-active="2"
        unique-opened
        class="el-menu-vertical-demo"
        @open="handleMenuChange"
        @close="handleMenuChange"
      >
        <template v-for="item in menuItems" :key="item.route">
          <el-sub-menu
            v-if="item.subItems && item.subItems.length"
            :index="item.route"
          >
            <template #title>
              <span style="color: #fff">{{ item.title }}</span>
            </template>
            <el-menu-item
              v-for="subItem in item.subItems"
              :key="subItem.route"
              :index="subItem.route"
              @click="handleClick(subItem.route)"
            >
              {{ subItem.title }}
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item
            v-else
            :index="item.route"
            @click="handleClick(item.route)"
          >
            {{ item.title }}
          </el-menu-item>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";

const emit = defineEmits(["update:drawer"]);
const props = defineProps({
  drawer: {
    type: Boolean,
    required: false,
  },
});

const route = useRoute();
const router = useRouter();

// 判断是否为移动端
const isMobile = computed(() => window.innerWidth <= 767);

// 导航菜单数据
const menuItems = [
  { title: "首页", route: "/", subItems: [] },
  {
    title: "走进众延",
    route: "/about",
    subItems: [
      { title: "众延概括", route: "/about/summary" },
      { title: "众延文化", route: "/about/culture" },
    ],
  },
  {
    title: "众延资讯",
    route: "/news",
    subItems: [
      { title: "众延动态", route: "/news/dynamics" },
      { title: "行业资讯", route: "/news/industry" },
    ],
  },
  {
    title: "延保信息",
    route: "/warranty",
    subItems: [
      { title: "延保概念", route: "/warranty/concept" },
      { title: "延保范围", route: "/warranty/scope" },
      { title: "服务品牌", route: "/warranty/brands" },
    ],
  },
  {
    title: "客户服务",
    route: "/service",
    subItems: [
      { title: "业务须知", route: "/service/notice" },
      { title: "服务流程", route: "/service/process" },
      { title: "汽车保养FAQ", route: "/service/faq" },
    ],
  },
  {
    title: "招贤纳士",
    route: "/jobs",
    subItems: [
      { title: "职位列表", route: "/jobs/list" },
      { title: "投递简历", route: "/jobs/resume" },
    ],
  },
  { title: "联系我们", route: "/contact", subItems: [] },
];

// 处理菜单项点击事件
const handleClick = (routePath) => {
  router.push(routePath);
  closeMenu(); // 点击后关闭抽屉
};

// 处理子菜单展开/收起事件
const handleMenuChange = (key, keyPath) => {
  console.log(key, keyPath);
};

// 关闭菜单
const closeMenu = (e) => {
  e.stopPropagation();
  emit("update:drawer", false);
};
</script>

<style scoped>
.left-menu {
  position: fixed;
  top: 0;
  left: -388px;
  width: 50%;
  height: 100vh;
  background-color: #fff;
  z-index: 1000;
  transition: left 0.3s ease;
  display: none;
}

.left-menu.open {
  left: 0;
  /* 显示 */
}

.menu-overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  height: 100vh;
  /* background-color: rgba(0, 0, 0, 0.5); */
  z-index: 998;
  display: none;
}

.left-menu.open .menu-overlay {
  display: block;
}

.menu-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  z-index: 1001;
   background-color: rgb(14, 34, 95);
}

.el-menu-vertical-demo {
  height: 100%;
  background: rgb(14, 34, 95);
}

.el-menu-item,
.el-sub-menu__title {
  font-size: 14px;
  color: #fff;
  background: rgb(14, 34, 95);
}

::v-deep .el-menu-item:hover {
  background-color: rgb(254, 0, 0) !important;
  color: #ffffff !important;
}

::v-deep .el-sub-menu__title:hover {
  background-color: rgb(254, 0, 0) !important;
  color: #ffffff !important;
}

.el-menu-item.is-active {
  color: #ffffff;
  font-weight: bold;
  background-color: rgb(254, 0, 0) !important;
}

::v-deep .el-sub-menu__icon-arrow,
::v-deep .el-menu-item .el-icon {
  color: #fff !important;
}
</style>
